<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的注册</title>
</head>
<body>
    <div id="app">
        <!-- 3. 使用组件 和 使用普通标签一样 -->
        <!-- <h1></h1> -->
        <!-- <abc></abc>
        <abc></abc>
        <abc></abc>
        <abc></abc> -->
        <!-- <bcd></bcd> -->
        <!-- <com3></com3> -->
        <!-- <com4></com4> -->

        <my-com></my-com>
    </div>

    <div id="app2">
        <my-com></my-com>
        <bcd></bcd>
        <abc></abc>
    </div>

    <template id="temp1">
        <div>
            <h1>标题1</h1>
            <div>div</div>
            <p>pppppppppp</p>
            <span>span</span>
            <i>iiiiii</i>
        </div>
    </template>
</body>
<script src='../../vue文件/vue.js'></script>
<script>
    // 1. 创建组件
    let com1 = Vue.extend({
        // template 组件模板
        template:'<div>好好学习</div>'
    })

    // 2. 注册组件

    // Vue.component('组件名称',组件)
    Vue.component('abc',com1);//这是全局注册
    
    // 创建并注册组件
    Vue.component('bcd',Vue.extend({
        // template 只能有一个跟标签
        template:`
            <div>
                <h3>这是标题3</h3>
                <p> 这是p标签</p> 
                <div>第二个</div>   
            </div>   
        `
    }))

    // 创建并注册组件
    Vue.component('com3',{
        template:'<h2>标题2</h2>'
    });

    // 第四种 注册组件
    Vue.component('com4',{
        template:'#temp1'
    })

    Vue.component('myCom',{
        template:'<div>mycom</div>'
    })


    let vm = new Vue({
        el: '#app',
        data: {
             msg:'hello vue.js'
        },
        methods: {}
    })
    let vm2 = new Vue({
        el: '#app2',
        data: {
             msg:'hello vue.js'
        },
        methods: {}
    })
</script>

</html>